<template>
    <page-layout>
       <template v-slot:header>
            <el-button type="primary" size="small" @click="saveEvt">保存</el-button>
            <el-button size="small" @click="closeEvt">取消</el-button>
        </template>

        <el-form :model="page" 
            :rules="rules" 
            size="small"
            ref="ruleForm" 
            label-width="100px">
            <el-row>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <el-form-item label="样品名字:" prop="product_name">
                        <el-input v-model="page.product_name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <el-form-item label="产品名字" prop="name">
                        <el-input v-model="page.name" placeholder="选择产品名字">
                             <el-button slot="append" icon="el-icon-search" @click="sampleEvt" >
                        </el-button>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <el-form-item label="开售时间:" prop="sale_stime">
                        <el-date-picker v-model="page.sale_stime"
                        type="date"
                        placeholder="选择开售时间" 
                        :disabled="true"/>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <el-form-item label="下架时间:" prop="sale_etime">
                        <el-date-picker v-model="page.sale_etime"
                        type="date"
                        placeholder="选择下架时间"
                        :disabled="true"/>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <el-form-item label="类型:" prop="type">
                        <el-select v-model="page.type" disabled >
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <el-form-item label="单位:" prop="unit">
                        <el-select v-model="page.unit" disabled >
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <el-form-item label="品级:" prop="level">
                        <el-select v-model="page.level" disabled >
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <el-form-item label="产地:" prop="place">
                        <el-input v-model="page.place"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <el-form-item label="品牌:" prop="brand">
                        <el-input v-model="page.brand"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="详情:" prop="detail">
                        <el-tag style="margin: 0 10px 10px 0;"
                            v-for="tag in arr"
                            :key="tag"
                            @close="closeEvt(tag, 'detail')"
                            closable>
                            {{tag}}
                        </el-tag>
                        <el-button size="small" @click="filePickEvt('detail')" icon='el-icon-upload2'/>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="banner:" prop="banner">
                        <el-tag style="margin: 0 10px 10px 0;"
                            v-for="tag in arr"
                            :key="tag"
                            @close="closeEvt(tag, 'banner')"
                            closable>
                            {{tag}}
                        </el-tag>
                        <el-button size="small" @click="filePickEvt('banner')" icon='el-icon-upload2'/>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="备注" prop="remark">
                        <el-input type="textarea" v-model="page.remark"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <productPicker v-model="show" @editEvt="editEvt"/>
        </el-form>
    </page-layout>
</template>

<script>
import { filePicker } from '@/util'
import { fileUploadApi, sampleAddApi } from '@/apis/productApi'
import ProductPicker from './ProductPicker.vue'
    export default {
        components: { ProductPicker },
        data () {
            return {
                arr: [],
                page: 
                    {   
                        "list": [],
                        "name": "",
                        "product_id": "",
                        "product_name": "",
                        "sale_stime": "",
                        "sale_etime": "",
                        "type": "",
                        "unit": "",
                        "level": "",
                        "place": "",
                        "brand": "",
                        "detail": [],
                        "banner": [],
                        "remark": ""
                    },
                    rules: {
                        name: [
                        { required: true, message: '请输入样品名称', trigger: 'blur' }, 
                        ],
                        product_name: [
                                {required: true, message: '必须选择产品名称'},
                            ],
                        place: [
                                {required: true, message: '必须选择产品产地'},
                            ],
                            brand: [
                                {required: true, message: '品牌必须输入'}
                            ]
                    },
                    show:false
                    
            }
        },
        methods: {
            closeEvt() {
            },
            editEvt(list) {
                this.page = list
                this.page.product_id = list.id
                this.arr = [this.page.detail]
                this.arr = [this.page.banner]
                
            },
            sampleEvt() {
                
                 this.show = true
            },
            saveEvt() {
                this.$refs.ruleForm.validate().then(() => {
                sampleAddApi(this.page).then(d => {
                    this.$message({
                        message: '保存成功！',
                        type: 'success'
                        });
                })
            }).catch(() => {
                console.log('---------------------- 校验失败')
            })
            },
            filePickEvt(type) {
                filePicker(files => {
                // 这里的上传要使用FormData对象
                // 它是W3C定义的一个用于把数据对象转为form表单对象的一个方法(js对象序列化为Form对象)
                let formData = new FormData()
                // 因为files是一个伪数组
                Array(files.length).fill().forEach((_, i) => {
                    // 循环添加文件数据到formData对象中
                    formData.append('file', files[i])
                })
                // 调用接口
                fileUploadApi('product_' + type, formData).then(d => {
                    if (d.code === 200) {
                        this.page[type] = this.page[type].concat(
                            d.data.map(it => it.path)
                        ),
                        this.arr = [this.page[type]]
                    }
                })
            })
            },
            closeEvt(tag, type) {
            // this.page.detail = this.page.detail.filter(it => it !== tag)
            this.page[type].splice(this.page[type].findIndex(it => it === tag), 1)
        }
        }
    }
</script>

<style>
     .productInput {
        display: flex;
}
     .el-icon-search {
        margin-left: -6px;
    }
</style>